<script setup>
import {ref} from 'vue';
import {useStore} from "vuex";

let msg = ref('')
let store = useStore()
let handleAdd = () => {
  store.commit('add', msg.value)
  msg.value = ''
}

let handleClear = () => {
  store.commit('clear')
  msg.value = ''
}
</script>

<template>
  <h2>任务列表</h2>
  <div>
    <input type="text" v-model="msg" ><button @click="handleAdd">添加</button><button @click="handleClear">清空</button>
  </div>
  <router-link to="/todo">所有任务</router-link> |
  <router-link to="/complete">已完成任务</router-link> |
  <router-link to="/incomplete">未完成任务</router-link> |
  <router-view></router-view>
</template>

<style scoped>
.router-link-active{
  background: red;
  color:white;
}

.through{
  text-decoration: line-through;
}
</style>